<template>
	<view class="count">
		<view class="top f f-a-c f-j-b p-20">
			<view class="left">
				单选题
			</view>
			<view class="right">
				第{{num+1}}题/总{{radioList.length}}题
			</view>
		</view>
		<!-- 标题 -->
		<view class="title p-20 m-t-30 m-b-30">
			{{radioList[num].name}}
		</view>
		<!-- 下面的选择题 -->
		<view class="p-20">
			<u-radio-group v-model="radio">
				<u-radio v-for="(item, index) in radioList[num].options" @change="radioChange" active-color="#19be6b"
					:key="index" :name="item.name">
					{{index==0?'A.':index==1?'B.':index==2?'C.':'D.'}}{{ item.name }}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="btn f f-a-c f-j-c">
			<view @click="next" class="nextNo">
				返回上一题
			</view>
			<view @click="submit" class="comgin">
				提交
			</view>
		</view>
		<!-- 回到尾部 -->
		<!-- <view @click="backNaxt" v-show="nums!=setList.length-1" class="back"> -->
		<view @click="backNaxt" v-show="num<setList.length-1" class="back">
			回到第{{setList.length}}题
		</view>
		<!--  -->
		<!-- 打开弹出层 -->
		<u-modal v-model="show" :show-cancel-button="true" @confirm="confirmFn" :content="content"></u-modal>
		<u-mask :show="shows" @click="show = false">
			<view class="tan p-20 p-t-40">
				<image src="/static/cha.png" @click="cha" class="cha" mode=""></image>
				<view class="points m-b-40">
					本次答题得分
				</view>
				<view class="tubiao" v-if="shows">
					<u-circle-progress active-color="#009d85" :percent="percent">
						<view class="u-progress-content">
							<view class="u-progress-dot"></view>
							<text class='u-progress-info'>{{percent}} <text class="fen">分</text> </text>
						</view>
					</u-circle-progress>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percent: 0,
				shows: false,
				content: '',
				show: false,
				setList: [],
				num: 0,
				// nums: -1,
				allNum: 0,
				numbs: 1,
				radio: '',
				id: 0,
				radioList: [{
					name: '家长们一般会在哪些地方给孩子借书阅读',
					list: [{
						is_corr: false,
						name: 'A.上语书店'
					}, {
						is_corr: true,
						name: 'B.上语合肥书店'
					}, {
						is_corr: false,
						name: 'C.上语南京书店'
					}, {
						is_corr: false,
						name: 'D.上语上海书店'
					}]
				}, {
					name: '家长们一般会在哪些地方给岁的法国v呃dvds堵塞管道孩子借书阅读',
					list: [{
						is_corr: false,
						name: 'A.fewefew'
					}, {
						is_corr: false,
						name: 'B.feewqfe'
					}, {
						is_corr: false,
						name: 'C.asdas店'
					}, {
						is_corr: true,
						name: 'D.asdfsafdsf'
					}]
				}, {
					name: '但是更但是v广东省V大是DVD是v但是v的VS的苏打实打实给v的VS的S的v大苏打的吧多的是',
					list: [{
						is_corr: true,
						name: 'A.二分五分'
					}, {
						is_corr: false,
						name: 'B.阿斯蒂芬擦粉v俄方'
					}, {
						is_corr: false,
						name: 'C.而非王菲菲'
					}, {
						is_corr: false,
						name: 'D.份额为凤尾'
					}]
				}, ]
			}
		},
		onShow() {
			this.initList()
		},
		onLoad(options) {
			this.id = options.id
		},
		methods: {
			// /点击cha
			cha() {
				this.shows = false
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},
			// 返回上一题
			backNaxt() {
				this.num = this.setList.length - 1
				this.radio = this.setList[this.num].name
				this.numbs = 1
				// this.nums = this.radioList.length
			},
			// 获取题目
			async initList() {
				let n = await this.$api.Questions({
					id: this.id
				})
				this.radioList = n.data.questions.map(item => {
					item.name = item.title
					item.options.forEach(ite => {
						ite.is_corr = ite.is_correct
						ite.name = ite.subject
					})
					return item
				})
				// console.log(list, '0.0.0.0.0.00.0.0.00.0.0.0..0.0');
			},
			// 点击确认提交
			async confirmFn() {
				let list = this.setList.filter(item => item.is_corr)
				console.log(list, '222');
				this.percent = Number(list.length / this.radioList.length).toFixed(2) * 100
				this.shows = true
				// 发送请求来提交分数
				let n = await this.$api.SubmitTi({
					score: this.percent
				}, this.id)
			},
			// 点击提交
			submit() {
				if (this.setList.length != this.radioList.length) {
					this.content = "您还没答完题,确认要提交吗?"
					this.show = true
				} else {
					this.content = "您已答完题,确认要提交吗?"
					this.show = true
				}
			},
			// /当选择的时候
			radioChange(e) {
				// if (this.numbs == 1) {
				// 	this.nums++
				// }
				console.log(e);
				if (this.num == this.setList.length) {
					// 是不是正确答案
					if (this.radioList[this.num].options.some(u => u.is_corr && u.name == e)) {
						this.setList.push({
							name: e,
							is_corr: true
						})
					} else {
						this.setList.push({
							name: e,
							is_corr: false
						})
					}
				} else if (this.num < this.setList.length) {
					// 是不是正确答案
					if (this.radioList[this.num].options.some(u => u.is_corr && u.name == e)) {
						this.setList[this.num] = {
							name: e,
							is_corr: true
						}
					} else {
						this.setList[this.num] = {
							name: e,
							is_corr: false
						}
					}
				}
				if (this.setList.length == this.radioList.length) {
					setTimeout(() => {
						this.$msg('你已答完题,请提交')
					}, 1000)
					return
				} else {
					setTimeout(() => {
						this.num++
					}, 500)
				}
			},
			// 点击上一题
			next() {
				if (this.num == 0) {
					return this.$msg('已经是第一题')
				}
				this.num--
				this.nums--
				this.numbs = 2
				this.radio = this.setList[this.num].name

			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-circle-progress {
		margin-left: 50%;
		transform: translateX(-50%);
	}

	/deep/ .u-canvas-bg {
		z-index: -1 !important;
	}

	.u-progress-info {
		font-size: 56rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #009d85;

		.fen {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #009d85;
		}
	}

	.tan {
		position: relative;
		width: 540rpx;
		height: 418rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 60%;
		margin-left: 50%;
		transform: translate(-50%, -0%);

		.points {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #000000;
		}

		.cha {
			width: 42rpx;
			height: 42rpx;
			position: absolute;
			top: -60rpx;
			right: 5rpx;
		}
	}

	.back {
		position: fixed;
		bottom: 300rpx;
		right: 0;
		background-color: #0db99f;
		padding: 6rpx 30rpx;
		border-radius: 30rpx 0 0 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #ffffff;
	}

	.btn {
		position: fixed;
		width: 90%;
		bottom: 150rpx;
		left: 5%;

		.nextNo {
			width: 50%;
			height: 88rpx;
			line-height: 85rpx;
			border: 2rpx solid #009d85;
			border-radius: 46rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #009d85;
			margin-right: 20rpx;
		}

		.comgin {
			width: 50%;
			height: 88rpx;
			line-height: 85rpx;
			background: #0db99f;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
	}

	/deep/ .u-radio {
		margin-bottom: 20rpx;
		width: 100% !important;
		background-color: #fbfbfb;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #333333;
		text-indent: 2em;
	}

	.top {
		width: 100%;
		height: 72rpx;
		background: #009d85;

		.left,
		.right {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #ffffff;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #fff;
	}
</style>